import { StyleSheet,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign } from '@expo/vector-icons';
import Home from './pages/Home'
import './global'
import Detail from './pages/Detail';
import Publish from './pages/Publish'
import { Feather } from '@expo/vector-icons'; 
import { FontAwesome5 } from '@expo/vector-icons'; 
import { RegisterPage } from './pages/TelLogin';
import TelLogin from './pages/TelLogin';
import User from './pages/User';
import SelfRevisonRoom from './pages/UserFunction/SelfRevisonRoom';
import PractiseEveryDay from './pages/UserFunction/PractiseEveryDay';
import StartLearning from './pages/UserFunction/StartLearning';
import Mycollection from './pages/UserFunction/Mycollection';
import ChangeMessagePage from './pages/UserFunction/changeMessagePage';
import AnswerPage from './pages/UserFunction/AnswerPage';
import { UserLogin } from './pages/TelLogin';
import { Ionicons } from '@expo/vector-icons';
import Mypublish from './pages/UserFunction/Mypublish';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabBar=()=>(
  <Tab.Navigator
    screenOptions={{
      tabBarInactiveTintColor:'black',
      tabBarLabelStyle: {height:13,fontSize: 10},
      tabBarStyle:{backgroundColor:'white',height:pxtodpH(88)}
    }}    
  >
    <Tab.Screen
      options={{
        headerShown:false,
        title:'首页',
        tabBarIcon:({color,size})=>(
          <AntDesign name='home'
          color={color}
          size={size}
          />
        )
      }}
      name='Home'
      component={Home} 
    />
    <Tab.Screen
      options={{
        headerShown:false,
        title:'发布',
        headerStyle:{backgroundColor:'#FFDB2C'},
        headerTitleAlign:'center',
        tabBarIcon:({color,size})=>(
          <Ionicons name="add-circle-outline" size={50} color={color} />
        )
      }}
      name='Publish'
      component={Publish} 
    />
    <Tab.Screen
      options={{
        headerShown:true,
        title:'我的',
        headerStyle:{backgroundColor:'#e9f1f6'},
        headerTitleAlign:'center',
        tabBarIcon:({color,size})=>(
          <AntDesign name='user' color={color} size={size}/> 
        )
      }}
      name='User'
      component={User}
    />

</Tab.Navigator>

)

export default function App() {
return (
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen 
      name='UserLogin' 
      component={UserLogin}
      options={{
        headerShown:false
      }}
    />
    <Stack.Screen 
      options={{
        headerShown:false
      }}
      name='Root' 
      component={TabBar}
    />
    <Stack.Screen
      name='changeMessagePage'
      component={ChangeMessagePage}
      options={{
        title:'修改个人信息'
      }}
    />
    <Stack.Screen 
      name='Deatil' 
      component={Detail}
    />
    <Stack.Screen
      name='TelLogin'
      component={TelLogin}
      options={{
        headerShown:false
      }}
    />
    <Stack.Screen
      name='SelfRevisonRoom'
      component={SelfRevisonRoom}
      options={{
        headerShown:false
      }}
    />
    <Stack.Screen
      name='PractiseEveryDay'
      component={PractiseEveryDay}
      options={{
        title:'今日题目',
        headerTitleAlign:'center'
      }}
    />
    <Stack.Screen
      name='AnswerPage'
      component={AnswerPage}
      options={{
        title:'今日题目',
        headerTitleAlign:'center'
      }}
    />
    <Stack.Screen
      name='StartLearning'
      component={StartLearning}
      options={{
        title:'自习室'
      }}
    />
     <Stack.Screen
      name='Mycollection'
      component={Mycollection}
      options={{
        title:'我的收藏'
      }}
    />
     <Stack.Screen
      name='Mypublish'
      component={Mypublish}
      options={{
        title:'我的问题'
      }}
    />
  </Stack.Navigator>

</NavigationContainer>



);
}
const styles = StyleSheet.create({

});